<template>
  <div class="wrapper">
    <el-button v-if="currentChecked" @click="dialogVisible = true">
      {{currentChecked[prop.label]}}
      <i class="el-icon-arrow-down el-icon--right"></i>
    </el-button>
    <el-button v-else plain @click="dialogVisible = true">
      请选择{{labelName}}
      <i class="el-icon-arrow-down el-icon--right"></i>
    </el-button>
    <el-dialog
      width="600px"
     :title="`选择${labelName}`"
     append-to-body
     :visible.sync="dialogVisible"
    >
      <div v-loading="loading">
        <template v-if="list.length > 0">
          <Item
            v-for="(item, index) in list"
            :key="index"
            :title="item[prop.label]"
            :index="item[prop.value]"
            :selected="isSelected(item)"
            @click.native="click(item, (item.ID === modelValue))"
          ></Item>
          <div v-if="totalNumber > pageSize" style="margin-top:10px;text-align:center">
            <el-pagination
              layout="prev, pager, next"
              :page-size="pageSize"
              :current-page="pageNumber"
              @current-change="pageNumberChange"
              :total="totalNumber">
            </el-pagination>
          </div>
        </template>
        <template v-else>
          <occupied-card>
            {{labelName}}为空
          </occupied-card>
        </template>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Item from './item'
import Emitter from 'element-ui/src/mixins/emitter'
export default {
  mixins: [Emitter],
  components: {
    Item
  },
  props: {
    value: null,
    label: {
      type: String,
      default: ''
    },
    labelName: {
      type: String,
      default: ''
    },
    url: {
      type: String,
      default: ''
    },
    prop: {
      value: Object,
      default: () => {}
    },
    pageSize: {
      type: Number,
      default: 10
    }
  },
  data () {
    return {
      loading: false,
      dialogVisible: false,
      list: [],
      pageNumber: 1,
      totalNumber: 0,
      currentChecked: null
    }
  },
  watch: {
    dialogVisible (val) {
    },
    currentChecked (val) {
      if (val) {
        this.modelValue = val[this.prop.value]
      } else {
        this.modelValue = null
      }
    },
    value (val) {
      if (val) {
      } else {
        this.currentChecked = null
      }
    }
  },
  computed: {
    modelValue: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
        this.dispatch('ElFormItem', 'el.form.change', val)
        this.dialogVisible = false
      }
    }
  },
  destroyed () {
  },
  methods: {
    isSelected (item) {
      return item[this.prop.value] === this.modelValue
    },
    click (item, selected) {
      if (!selected) {
        this.$emit('change', item)
        this.currentChecked = item
      }
    },
    init () {
      this.pageNumberChange(1)
    },
    pageNumberChange (pageNumber) {
      this.pageNumber = pageNumber
      this.getList()
    },
    async getList () {
      this.loading = true
      const result = await this.$http.get(this.url, {
        page: this.pageNumber,
        pageSize: this.pageSize
      })
      this.loading = false
      if (result.Code === 100000) {
        this.totalNumber = result.Data.total
        this.list = result.Data[this.prop.listName]
      } else {
        this.$message.error(result.Msg)
      }
    }
  },
  created () {},
  mounted () {
    this.init()
    if (this.value && this.label) {
      this.currentChecked = {
        [this.prop.value]: this.modelValue,
        [this.prop.label]: this.label
      }
    } else {
      this.currentChecked = null
    }
  }
}
</script>
<style lang="less" scoped>
</style>
